<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
</body>

</html>
<script>
    var btns = document.querySelectorAll('button')
    //循环三次分别是这三个按钮绑定的点击事件
    // for (let i = 0; i < btns.length; i++) {
    //     btns[i].onclick = function () {
    //         console.log(i);
    //     }
    // }

    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick =(function(i){
            return function () {//这个内层函数就是闭包函数，可以访问外层函数的变量(这个变量会永远保存在计算机内存中)
                console.log(i);
            }
        })(i)
        
    }

    //什么是闭包？
    //闭包就是可以访问外层函数作用域中变量的函数

    //闭包的特点
    //1.会将闭包所访问的变量永远保留在计算机内存中，可能会产生内存泄漏               
</script>